<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="index.css" />
	</head>
	<body>
		<!--头部开始-->
		<div id="header">
			<div class="header_wrap">
				电影介绍
			</div>
		</div>
		<!--头部结束-->
		<!--内容区开始-->
		<div id="container">
			<!--图片区域开始-->
			<div id="images">
				<ul>
					<li><a href="#"><img src="images/image1.png"/></a></li>
					<li><a href="#"><img src="images/image2.png"/></a></li>
					<li><a href="#"><img src="images/image3.png"/></a></li>
					<li><a href="#"><img src="images/image4.png"/></a></li>
				</ul>
			</div>
			<!--图片区域结束-->
			<!--简介区开始-->
			<div id="content">
				<div class="content_main">
					<h1>头脑特工队 Inside Out<span>(2015)</span></h1>
					<div class="director">
						<span class="span1">导演：</span>
						<span class="span2">彼特•道格特 / 罗纳尔多•德尔•卡门</span>
					</div>
					<div class="score">
						<span>评分：</span>
						<span>
							<img src="images/star1.png"/>
							<img src="images/star1.png"/>
							<img src="images/star1.png"/>
							<img src="images/star1.png"/>
							<img src="images/star2.png"/>
						</span>
					</div>
					<h3>剧情简介······</h3>
					<p>可爱的小女孩莱莉出生在明尼苏达州一个平凡的家庭中，从小她在父母的呵护下长大，
						脑海中保存着无数美好甜蜜的回忆。当然这些记忆还与几个莱莉未曾谋面的伙伴息息
						相关，他们就是人类的五种主要情绪：乐乐、忧忧、怕怕、厌厌和怒怒。
					</p>
				</div>
				
				<div class="content_main" style="display: none;">
					<h1>机器人瓦力 WALL•E<span>(2018)</span></h1>
					<div class="director">
						<span class="span1">导演：</span>
						<span class="span2">安德鲁•斯坦顿</span>
					</div>
					<div class="score">
						<span>评分：</span>
						<span>
							<img src="images/star1.png"/>
							<img src="images/star1.png"/>
							<img src="images/star1.png"/>
							<img src="images/star1.png"/>
							<img src="images/star1.png"/>
						</span>
					</div>
					<h3>剧情简介······</h3>
					<p>公元2805年，人类文明高度发展，却因污染和生活垃圾大量增加使得地球不再适于人类居住。
						地球人被迫乘坐飞船离开故乡，进行一次漫长无边的宇宙之旅。临行前他们委托
						Buynlarge的公司对地球垃圾进行清理，该公司开发了名为WALL•E 的机器人担当此重任。
					</p>
				</div>
				
				<div class="content_main" style="display: none;">
					<h1>驯龙高手 How to Train Your Dragon<span>(2010)</span></h1>
					<div class="director">
						<span class="span1">导演：</span>
						<span class="span2">迪恩•德布洛斯 / 克里斯•桑德斯</span>
					</div>
					<div class="score">
						<span>评分：</span>
						<span>
							<img src="images/star1.png"/>
							<img src="images/star1.png"/>
							<img src="images/star1.png"/>
							<img src="images/star1.png"/>
							<img src="images/star2.png"/>
						</span>
					</div>
					<h3>剧情简介······</h3>
					<p>维京岛国的少年小嗝嗝是部落统领伟大的斯托里克的儿子，他非常想像自己的父亲一样亲手屠
						龙——这些飞龙是岛上维京人放牧羊群的主要天敌——但他每次出现在部落屠龙的战斗中都只
						给大家徒增烦恼。
					</p>
				</div>
				
				<div class="content_main" style="display: none;">
					<h1>美食总动员 Ratatouille <span>(2007)</span></h1>
					<div class="director">
						<span class="span1">导演：</span>
						<span class="span2">布拉德•伯德 / 简•皮克瓦</span>
					</div>
					<div class="score">
						<span>评分：</span>
						<span>
							<img src="images/star1.png"/>
							<img src="images/star1.png"/>
							<img src="images/star1.png"/>
							<img src="images/star1.png"/>
						</span>
					</div>
					<h3>剧情简介······</h3>
					<p>小老鼠雷米在嗅觉方面有着无与伦比的天赋，不想过与垃圾堆为伴的生活，心怀成为五星大
						厨的梦想。一个偶然的机会，他认识了古斯特餐厅的学徒林奎尼，这个倒霉的学徒生性害
						羞，在厨艺上更是没有什么天赋，并且遭到餐厅大厨的排挤，即将被解雇。这一人一鼠结
						成了奇特的联盟：雷米奉献自己极富创造力的大脑。操作林奎尼前台“表演”。
					</p>
				</div>
			</div>
			<!--简介区结束-->
		</div>
		<!--内容区结束-->
		
		
		<!--<script>
			window.onload = function() {
				
				//获得图片对象
				var images = document.getElementById('images');
				var imgs = images.getElementsByTagName('img');
				var contents = document.getElementsByClassName('content_main');
				
				for (var i = 0; i < imgs.length; i ++) {
					
					imgs[i].setAttribute('imgNum',i);
					
					imgs[i].onclick = function() {
						
						for( var j = 0 ; j < imgs.length; j ++) {
							//取消所有高亮
							imgs[j].className = '';
							//所有内容隐藏
							contents[j].style.display = 'none';
						}
						
						this.className = 'active1';
						
						var imgNum = this.getAttribute('imgNum');
						
						contents[imgNum].style.display = 'block';
					}
				}
			}
		</script>-->
		
		
		<script>
			window.onload = function() {
				
				//获得对象
				var images = document.getElementById('images');
				var imgs = images.getElementsByTagName('img');
				var contents = document.getElementsByClassName('content_main');
				
				//事件委托
				images.onclick = function(e) {
					e = e || window.event;
					
					//给图片设置自定义属性，并取消所有高亮
					for (var i = 0;i < imgs.length; i ++) {
						imgs[i].setAttribute('imgNum',i);
						imgs[i].className = '';
					}
					
					//获得真正的事件源
					var currObj = e.target || e.srcElement;
					
					if (currObj.nodeName == 'IMG') {
						//给事件源加高亮
						currObj.className = 'active1';
						//获得当前事件源的自定义属性
						var imgNum = currObj.getAttribute('imgNum');
						
						for (var i = 0; i < contents.length; i ++) {
							//将所有的内容隐藏
							contents[i].style.display = 'none';
							//匹配时显示
							if (i == imgNum) {
								contents[i].style.display = 'block';
							}
						}
					}
					
					
				}
			}
		</script>
	</body>
</html>
